<template>
    <div class="login_container">
        <div v-show="login_show" class="login_box">
            <div class="login_form">
                <div style="margin: 20px 0; text-align: center; font-size: 34px; color:white;">
                    <b>无人机云端管控平台</b>
                </div>

                <el-form :model="user" ref="userForm">
                    <el-form-item prop="username">
                        <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请输入账号"
                                  prefix-icon="el-icon-user"
                                  v-model="user.account">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请输入密码"
                                  prefix-icon="el-icon-lock"
                                  show-password v-model="user.password">
                        </el-input>
                    </el-form-item>
                    <el-form-item style="margin: 10px 0; text-align: center">
                        <el-button type="warning" size="medium" autocomplete="off" style="width:100px"
                                   @click="toOther">注册
                        </el-button>
                        <el-button type="primary" size="medium" autocomplete="off" @click="login('userForm')"
                                   style="width:100px">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-show="register_show" class="login_box">
            <div class="login_form">
                <div style="margin: 20px 0; text-align: center; font-size: 34px; color:white;"><b>用户注册</b>
                </div>
                <el-form :model="userRegister" ref="userForm">
                    <el-select size="large" v-model="userRegister.compId" placeholder="请选择单位"
                               style="margin: 10px 0; width: 400px">
                        <el-option v-for="item in compInfo" :key="item.compId" :label="item.compName"
                                   :value="item.compId">
                        </el-option>
                    </el-select>
                    <el-select size="large" v-model="userRegister.roleId" placeholder="请选择用户类型"
                               style="margin: 10px 0; width: 400px">
                        <el-option v-for="item in roleInfo" :key="item.roleId" :label="item.roleName"
                                   :value="item.roleId">
                        </el-option>
                    </el-select>
                    <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请输入账号"
                              prefix-icon="el-icon-user" v-model="userRegister.account"></el-input>
                    <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请设置密码"
                              prefix-icon="el-icon-lock" v-model="userRegister.password"></el-input>
                    <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请输入用户名"
                              prefix-icon="el-icon-user" v-model="userRegister.userName"></el-input>
                    <el-input size="large" style="margin: 10px 0; width: 400px" placeholder="请输入联系电话"
                              prefix-icon="el-icon-phone" v-model="userRegister.userPhone"></el-input>
                    <el-form-item style="margin: 10px 0; text-align: center">
                        <el-button type="warning" size="medium" autocomplete="off" style="width:100px"
                                   @click="toOther">取消
                        </el-button>
                        <el-button type="primary" size="medium" autocomplete="off" @click="register"
                                   style="width:100px">注册
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
                       linesColor="#409EFF" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
                       :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
                       clickMode="push"></vue-particles>
    </div>
</template>

<script>
    import webSetInfo from "../server/webSetInfo";

    export default {
        name: "LoginPage",
        data() {
            return {
                user: {
                    account: '',
                    password: ''
                },
                userRegister: {
                    compId: '',
                    password: '',
                    userName: '',
                    userPhone: '',
                    account: '',
                    roleId: ''
                },
                userInfo: '',
                login_show: true,
                register_show: false,

                compInfo: [],
                roleInfo: []
            }
        },
        mounted() {
            this.getAllCompInfo();
            this.getAllRoleInfo();
        },
        methods: {
            getAllCompInfo() {
                this.$axios.post (`${webSetInfo.apiUrl}` + `/company/getCompany?userId=0`,
                    {
                        userId: 0
                    })
                    .then(res => {
                        this.compInfo = res.data;
                        this.$store.commit('setCompanyInfos', {context: this.compInfo})
                    })
            },

            getAllRoleInfo() {
                this.$axios.post (`${webSetInfo.apiUrl}` + `/user/getRoleInfo?userId=0`,
                    {
                        userId: 0
                    })
                    .then(res => {
                        this.roleInfo = res.data;
                        this.$store.commit('setRoleInfos', {context: this.roleInfo})
                    })
            },

            login(formName) {
                if (this.user.account == '' || this.user.password == '') {
                    this.$message.error('账号或密码不能为空');
                    return;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('userLogin', {
                            username: this.user.account,
                            password: this.user.password,
                            account: this.user.account
                        }).then(res => {
                            if (res.code === 200) {
                                this.$router.push('/home');
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                    }
                })
            },
            toOther() {
                this.login_show = !this.login_show
                this.register_show = !this.register_show
            },

            register() {
                if (this.userRegister.userName == '' || this.userRegister.password == '' || this.userRegister.compId ==
                    '' || this.userRegister.userPhone == '' || this.userRegister.account == '' || this.userRegister.roleId == '') {
                    this.$message.error("请完善信息")
                    return;
                }
                this.$axios.post (`${webSetInfo.apiUrl}` + `/user/register`, {
                    username: this.userRegister.userName,
                    password: this.userRegister.password,
                    userPhone: this.userRegister.userPhone,
                    compId: this.userRegister.compId,
                    account: this.userRegister.account,
                    roleId: this.userRegister.roleId
                })
                    .then(response => {
                        if (response.code == 200) {
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                            this.toOther()
                        } else {
                            this.$message.error(response.message);
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .login_container {
        background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .login_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login_form {
        background-color: #fff;
        width: 600px;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
        text-align: center;
    }
</style>
